<template>
  <div class="role-lists">
    <el-card class="border-none mb-2" shadow="never">
      <el-form style="margin-bottom: -16px" :model="queryParams" inline>
        <el-form-item label="角色名称">
          <el-input
            v-model="queryParams.name"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>
        <el-form-item label="角色标识">
          <el-input
            v-model="queryParams.code"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="border-none mb-4" shadow="never">
      <div>
        <el-button
          v-perms="['auth.role/add']"
          type="primary"
          @click="handleAdd"
        >
          <template #icon>
            <el-icon><Plus /></el-icon>
          </template>
          新增
        </el-button>
      </div>
      <div class="mt-4" v-loading="pager.loading">
        <div>
          <el-table
            :data="pager.lists"
            size="large"
            row-key="id"
            border
            :header-cell-style="{background:'var(--el-bg-color-page)'}"
            default-expand-all
          >
            <!-- <el-table-column prop="id" label="ID" min-width="100" /> -->
            <el-table-column prop="name" label="角色名称" min-width="150" />
            <el-table-column prop="code" label="标识" min-width="150" />
            <el-table-column prop="weigh" label="权重" min-width="150" />
            <el-table-column prop="status" label="状态" min-width="100" >
                <template #default="{ row }">
                    <el-tag class="ml-2" v-if="row.status == 'normal'" type="success">正常</el-tag>
                    <el-tag class="ml-2" v-else type="info">禁用</el-tag>
                </template>  
              </el-table-column>
            <el-table-column
              prop="create_time"
              label="创建时间"
              min-width="100"
            />
            
            <el-table-column label="操作" width="300" fixed="right">
              <template #default="{ row }">
                <el-button
                  link
                  type="primary"
                  v-perms="['auth.role/edit']"
                  @click="handleEdit(row)"
                >
                  编辑
                </el-button>
                <el-button
                  link
                  type="primary"
                  v-perms="['auth.role/edit']"
                  @click="handlePermission(row)"
                >
                菜单权限
                </el-button>
                <el-button
                  link
                  type="primary"
                  v-perms="['auth.role/edit']"
                  @click="handleDataPermission(row)"
                >
                数据权限
                </el-button>
                <el-button
                  v-perms="['auth.role/delete']"
                  link
                  type="danger"
                  @click="handleDelete(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="d-flex justify-content-end mt-4">
          <la-pagination v-model="pager" @change="getLists" />
        </div>
      </div>
    </el-card>
    
    <edit-dialog v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    <permissions-dialog v-if="showPermissions" ref="permissionsRef" @success="getLists" @close="showPermissions = false"  />
    <data-permission-dialog v-if="showDataPermission" ref="dataPermissionRef" @success="getLists" @close="showDataPermission = false"  />
  </div>
</template>
  
<script setup>
import { nextTick, reactive,ref } from "vue";
import api from "@/lnk/admin/api";
import editDialog from "./edit.vue";
import { usePaging } from "@/lnk/hooks/usePaging";
import feedback from '@/lnk/utils/feedback'
import permissionsDialog from './permissions.vue'
import dataPermissionDialog from './data-permission.vue'
const editRef = ref(null);
const permissionsRef = ref();
const dataPermissionRef = ref();


const queryParams = reactive({});

const showEdit = ref(false);
const showPermissions = ref(false);
const showDataPermission = ref(false);

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: api.role.list,
  params: queryParams,
});

const handleAdd = async ()=>{
  showEdit.value = true;
  await nextTick();
  await editRef.value.open()
}

const handleEdit= async (row) => {
  showEdit.value = true;
  await nextTick();
  await editRef.value.open('edit').setFormData(row)
}

const handlePermission = async (row)=>{
  showPermissions.value = true;
  await nextTick();
  await permissionsRef.value.setFormData(row)
  await permissionsRef.value.open('edit')
  
}

const handleDataPermission = async (row)=>{
  showDataPermission.value = true;
  await nextTick();
  await dataPermissionRef.value.setFormData(row)
  await dataPermissionRef.value.open('edit')
  
}

const handleDelete = async (id)=>{
    await feedback.confirm('确定要删除？')
    const res = await api.role.delete({id});
    feedback.msgSuccess(res.msg);
    getLists();
}

getLists();
</script>
  